// 选择门店

<template>
  <view>
    <dht-empty v-if="noData" type="no_store"></dht-empty>
    <template v-else>
      <!-- 门店 -->
      <scroll-view class="scroll-view" scroll-y @scrolltolower="reachBottom">
        <u-radio-group v-model="storeId">
          <view class="store" v-for="item in storeList" :key="item.id" @tap="storeId = item.id">
            <view class="store-check">
              <u-radio
                size="36"
                shape="circle"
                active-color="#fe492f"
                :name="item.id"
                v-model="item.checked"
              ></u-radio>
            </view>
            <view class="store-info">
              <view class="store-address">
                <view class="address">{{ item.detail_address }}</view>
                <text class="iconfont icon-dizhi"></text>
              </view>
              <view class="store-phone" @tap.stop="call(item.connect_mobile)">
                <text class="iconfont icon-dianhua"></text>
                <text class="phone">{{ item.connect_mobile }}</text>
              </view>
            </view>
          </view>
        </u-radio-group>
      </scroll-view>
      <!-- 确定 -->
      <view class="confirm" @tap="confirm">确定</view>
    </template>
  </view>
</template>

<script>
export default {
  data() {
    return {
      noData: false,
      page: 1,
      storeList: [],
      storeId: ''
    }
  },
  onLoad(options) {
    this.storeId = options.id
    this.getStoreList()
  },
  methods: {
    // 获取门店
    async getStoreList() {
      const res = await this.$http.post('/api/kuyou/order/index/address_list', {
        page: this.page
      })
      if (res.code == 200) {
        res.data.list.map((item) => (item.checked = false))
        this.storeList = [...this.storeList, ...res.data.list]
        this.noData = !this.storeList.length
      }
    },
    // 滚动触底
    reachBottom() {
      this.page++
      this.getStoreList()
    },
    // 拨打电话
    call(phoneNumber) {
      uni.makePhoneCall({
        phoneNumber
      })
    },
    // 选择门店
    confirm() {
      if (!this.storeId) {
        return uni.showToast({
          title: '请选择地址',
          icon: 'none'
        })
      }
      const pages = getCurrentPages()
      const prepage = pages[pages.length - 2]
      prepage.$vm.postForm.store_id = this.storeId
      prepage.$vm.storeDetail = this.storeList.find((item) => item.id == this.storeId)
      uni.navigateBack({ delta: 1 })
    }
  }
}
</script>

<style>
page {
  background-color: #f7f7f7;
}
</style>
<style lang="scss" scoped>
.iconfont {
  margin-top: 6rpx;
  font-size: 32rpx;
  color: #f74444;
}

// 门店
.scroll-view {
  height: calc(100vh - 222rpx);
}
.store {
  display: flex;
  align-items: center;
  padding: 36rpx;
  margin-top: 20rpx;
  background-color: #fff;
  color: #111111;
  .store-check {
  }
  .store-info {
    .store-address {
      display: flex;
      .address {
        width: 514rpx;
        margin-right: 52rpx;
        font-size: 32rpx;
      }
    }
    .store-phone {
      display: inline-block;
      margin-top: 20rpx;
      .phone {
        margin-left: 8rpx;
        font-size: 24rpx;
      }
    }
  }
}

// 确定
.confirm {
  position: fixed;
  bottom: 90rpx;
  left: 24rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 702rpx;
  height: 92rpx;
  margin: 0 auto;
  background: #f74444;
  border-radius: 50rpx;
  font-size: 32rpx;
  font-weight: 500;
  color: #ffffff;
}
</style>
